<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> https://codepen.io/PaulVanO/pen/XJYGNQ <div class="container"> <h1>Top right corner, click it!</h1> <p>View type 2 <a href="https://codepen.io/PaulVanO/pen/GgGeyE" target="_blank">here</a></p> </div> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu"> <ul> <li ><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div>

@import url(https://fonts.googleapis.com/css?family=Vollkorn|Roboto); body { background: #F5F5F5; } .container { position: absolute; width: 100%; heigh: 100%; text-align: center; top: 40%; left: 0; margin: 0 auto; font-family: 'Roboto', sans-serif; } .container p { font-size: 20px; } .container a { display: inline-block; position: relative; text-align: center; color: #FF5252; text-decoration: none; font-size: 20px; overflow: hidden; top: 5px; } .container a:after { content: ''; position: absolute; background: #FF5252; height: 2px; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: 0; -webkit-transition: .35s ease; transition: .35s ease; } .container a:hover:after, .container a:focus:after, .container a:active:after { width: 100%; } h1 { position: relative; text-align: center; font-family: 'Vollkorn', serif; } .button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; } .button_container:hover { opacity: .7; } .button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: #FFF; } .button_container.active .middle { opacity: 0; background: #FFF; } .button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: #FFF; } .button_container span { background: #FF5252; border: none; height: 5px; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition: all .35s ease; transition: all .35s ease; cursor: pointer; } .button_container span:nth-of-type(2) { top: 11px; } .button_container span:nth-of-type(3) { top: 22px; } .overlay { position: fixed; background: #FF5252; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; } .overlay.open { opacity: .9; visibility: visible; height: 100%; } .overlay.open li { -webkit-animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards; -webkit-animation-delay: .35s; animation-delay: .35s; } .overlay.open li:nth-of-type(2) { -webkit-animation-delay: .4s; animation-delay: .4s; } .overlay.open li:nth-of-type(3) { -webkit-animation-delay: .45s; animation-delay: .45s; } .overlay.open li:nth-of-type(4) { -webkit-animation-delay: .50s; animation-delay: .50s; } .overlay nav { position: relative; height: 70%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 50px; font-family: 'Vollkorn', serif; font-weight: 400; text-align: center; } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } .overlay ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; } .overlay ul li a { display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden; } .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; } .overlay ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 3px; background: #FFF; -webkit-transition: .35s; transition: .35s; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }

$('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay').toggleClass('open'); });